<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="false"
      :btnTitle="'上传文件'"
      @handelClick="() => addOrUpdate()"
    />
    <div class="app-container">
      <div class="containerMain">
        <div class="searchList">
          <div class="search-item" :style="btnStyle">
            <div class="item-layout">
              <div class="item-list">
<!--                <div class="item-con">-->
<!--                  <span>会议id</span>-->
<!--                  <el-input-->
<!--                    style="width: 200px"-->
<!--                    size="mini"-->
<!--                    v-model="searchform.meetingId"-->
<!--                    placeholder="请输入会议id"-->
<!--                  ></el-input>-->
<!--                </div>-->
<!--                <div class="item-con">-->
<!--                  <span>会话id</span>-->
<!--                  <el-input-->
<!--                    style="width: 200px"-->
<!--                    size="mini"-->
<!--                    v-model="searchform.sessionId"-->
<!--                    placeholder="请输入会话id"-->
<!--                  ></el-input>-->
<!--                </div>-->
<!--                <div class="item-con">-->
<!--                  <span>坐席id</span>-->
<!--                  <el-input-->
<!--                    style="width: 200px"-->
<!--                    size="mini"-->
<!--                    v-model="searchform.agentId"-->
<!--                    placeholder="请输入坐席id"-->
<!--                  ></el-input>-->
<!--                </div>-->
                <div class="item-con">
                  <span>文件类型</span>
                  <el-select
                    size="mini"
                    clearable
                    v-model="searchform.fileType"
                    placeholder="全部"
                  >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="视频" value="1"></el-option>
                    <el-option label="pdf文件" value="2"></el-option>
                  </el-select>
                </div>
                <div class="item-con">
                  <span>技能组</span>
                  <el-select
                    size="mini"
                    clearable
                    v-model="searchform.skillId"
                    placeholder="全部"
                  >
                    <el-option label="全部" value=""></el-option>
                    <el-option
                      :label="item.name"
                      :value="item.id"
                      v-for="(item, index) in skillList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </div>
              </div>
<!--              <div-->
<!--                v-if="btnShow"-->
<!--                style="-->
<!--                  margin-top: 20px;-->
<!--                  margin-right: 30px;-->
<!--                  position: absolute;-->
<!--                  top: 0;-->
<!--                  right: 0.4%;-->
<!--                "-->
<!--              >-->
<!--                <el-button-->
<!--                  style="text-decoration: underline"-->
<!--                  size="mini"-->
<!--                  v-if="fold"-->
<!--                  type="text"-->
<!--                  @click="foldSearchItem(false)"-->
<!--                  >展开</el-button-->
<!--                >-->
<!--                <el-button-->
<!--                  style="text-decoration: underline"-->
<!--                  size="mini"-->
<!--                  v-else-->
<!--                  type="text"-->
<!--                  @click="foldSearchItem(true)"-->
<!--                  >收起</el-button-->
<!--                >-->
<!--              </div>-->
            </div>
            <div class="item-btn">
              <el-button
                class="kyeup_search_btn"
                type="primary"
                size="mini"
                @click="() => fetchData()"
                >查询</el-button
              >
              <el-button type="default" size="mini" @click="() => reset()"
                >重置</el-button
              >
            </div>
          </div>
        </div>
        <div class="container">
          <div class="div-table">
            <el-table
              :header-cell-style="headerStyle"
              :data="list"
              element-loading-text="Loading"
              fit
              size="mini"
              highlight-current-row
            >
<!--              <el-table-column label="会议id">-->
<!--                <template slot-scope="scope">{{-->
<!--                  scope.row.meetingId-->
<!--                }}</template>-->
<!--              </el-table-column>-->
              <el-table-column label="技能组">
                <template slot-scope="scope">{{ scope.row.skillName }}</template>
              </el-table-column>
<!--              <el-table-column label="坐席id">-->
<!--                <template slot-scope="scope">{{ scope.row.agentId }}</template>-->
<!--              </el-table-column>-->
              <el-table-column label="文件类型">
                <template slot-scope="scope">{{
                  scope.row.fileType | statusFilter
                }}</template>
              </el-table-column>
              <el-table-column label="描述">
                <template slot-scope="scope">{{ scope.row.remark }}</template>
              </el-table-column>
              <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button type="text" @click="() => del(scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    type="text"
                    @click="() => downloadVideo(scope.row)"
                    >下载</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <pagination :exportShow="true" :type="'primary'" @handelExport="exportDemo" btnExport="导出" :pagination="pagination" />
    <el-dialog title="上传文件" :visible.sync="dialogVisible" width="500px" :show-close="false">
      <el-form :rules="addRules" ref="formAdd" label-width="120px" :model="formObj">
<!--        <el-form-item label="会议id">-->
<!--          <el-input-->
<!--            style="width: 200px"-->
<!--            size="mini"-->
<!--            v-model="formObj.meetingId"-->
<!--            placeholder="请输入会议id"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="坐席id">-->
<!--          <el-input-->
<!--            style="width: 200px"-->
<!--            size="mini"-->
<!--            v-model="formObj.agentId"-->
<!--            placeholder="请输入会议id"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="会话id">-->
<!--          <el-input-->
<!--            style="width: 200px"-->
<!--            size="mini"-->
<!--            v-model="formObj.sessionId"-->
<!--            placeholder="请输入会话id"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="技能组" prop="skillId">
          <el-select
            size="mini"
            clearable
            v-model="formObj.skillId"
            placeholder="请选择"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in skillList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="fileType">
          <el-select
            size="mini"
            clearable
            v-model="formObj.fileType"
            placeholder="全部"
          >
            <el-option label="视频" value="1"></el-option>
            <el-option label="pdf文件" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            style="width: 200px"
            size="mini"
            type="textarea"
            v-model="formObj.remark"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload
            class="upload-demo"
            ref="uploadBatch"
            action="string"
            accept=".pdf"
            :limit="1"
            :http-request="httpRequestExport"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import selectModule from "@/components/common/selectmodulecopy";
import inputModule from "@/components/common/inputmodule";
import {
  fetchList,
  fetchDel,
  fetchDisabled,
  fetchAdd,
  downloadUserInfo,
  fetchExport,
  fetchSkillList,
} from "@/api/systemapi/videomanage";
import { pageParams } from "@/settings";

export default {
  name: "videomanage",
  components: {
    Pagination,
    HeaderTitle,
    selectModule,
    inputModule,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "视频",
        2: "pdf文件",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      fold: true,
      btnStyle: { height: "55px", overflow: "hidden" },
      btnShow: true,
      entNum: "",
      titleList: [{ title: "视频管理" }],
      // treeData: null,
      list: null,
      listLoading: true,
      searchform: {
        meetingId: "",
        sessionId: "",
        agentId: "",
        fileType: "",
        skillId: "",
        rows: "10",
        page: "1",
      },
      formObj: {
        // meetingId: "",
        // sessionId: "",
        // agentId: "",
        skillId: "",

        fileType: "",
        remark: "",// 描述
      },
      optionOrg: [], // 所属机构
      accountList: [], // 账号权限下拉数组
      organprops: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
      // 分页
      pagination: pageParams,
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogVisible: false,
      skillList: [], // 技能组
      addRules: {
        skillId: [
          { required: true, message:"技能组不能为空", trigger: "change" },
        ],
        fileType: [
          { required: true, message:"文件类型不能为空", trigger: "change" },
        ]
      }
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    },
  },
  mounted() {
    const { entNum } = this.$route.params;
    this.entNum = entNum;
    this.searchform.entNum = entNum;
    this.fetchData();
    this.getSkill();
  },
  created() {
    this.adaptFn();
    this.$nextTick(() => {
      window.onresize = () => {
        return (() => {
          this.adaptFn();
        })();
      };
    });
  },
  methods: {
    getSkill() {
      fetchSkillList().then((res) => {
        if (res.code == 0) {
          this.skillList = res.data;
        }
      });
    },
    downloadVideo(row){
      window.open(row.url,'_blank');
    },
    adaptFn() {
      if ((document.body.clientWidth - 410) / 270 > 8) {
        this.btnShow = false;
      } else {
        this.btnShow = true;
      }
    },
    foldSearchItem(toFold) {
      if (toFold) {
        var style = { height: "55px", overflow: "hidden" };
        this.fold = true;
        this.btnStyle = style;
      } else {
        this.fold = false;
        this.btnStyle = {};
      }
    },
    exportDemo() {
      downloadUserInfo().then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        console.log(res, "res");
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    // 重置搜索，刷新列表
    reset() {
      this.searchform = {
        meetingId: "",
        sessionId: "",
        agentId: "",
        fileType: "",
        rows: "10",
        page: "1",
      }
    },
    fetchData() {
      fetchList({ ...this.searchform }).then((response) => {
        if (response.code == 0) {
          this.list = response.data.list;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 删除
    del(data) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        fetchDel({
          id: data.id,
        }).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 禁用
    disBtn(data, type) {
      this.$confirm(`是否确定${type == 2 ? "禁用" : "启用"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        fetchDisabled({
          id: data.id,
          enable: type,
        }).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: `${type == 2 ? "禁用" : "启用"}成功`,
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 新增
    addOrUpdate() {
      if(this.$refs.uploadBatch) {
       this.$refs.uploadBatch.clearFiles();
      }
      this.dialogVisible = true;
      // this.formObj.meetingId = ''
      // this.formObj.sessionId = ''
      // this.formObj.agentId = ''
      this.formObj.skillId = ''
      this.formObj.fileType = ''
      this.formObj.remark = ''
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj, "fileObj");
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("meetingId", this.formObj.meetingId); // 文件对象
      fd.append("sessionId", this.formObj.sessionId); // 文件对象
      fd.append("agentId", this.formObj.agentId); // 文件对象
      fd.append("fileType", this.formObj.fileType); // 文件对象
      fd.append("skillId", this.formObj.skillId); // 文件对象
      fd.append("remark", this.formObj.remark); // 文件对象
      console.log(fd, "fd");
      fetchAdd(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
          param.file = null
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitUpload() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          this.$refs.uploadBatch.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  .searchList {
    padding: 0px 10px 10px 10px;
    .search-item {
      font-size: 14px;
      color: #333;
      display: flex;
      justify-content: space-between;
      .item-layout {
        position: relative;
        display: flex;
        flex-direction: row;
      }
      .item-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
      .item-con {
        display: flex;
        margin-right: 30px;
        margin-top: 20px;
        span {
          display: inline-block;
          width: 100px;
          text-align: right;
          line-height: 28px;
          margin-right: 10px;
        }
      }
      .item {
        width: 180px;
        margin-right: 10px;
      }
      .item-btn {
        margin-top: 20px;
        flex: 0 0 140px;
      }
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
